<!-- 人员管理 -->
<template>
  <div id="manage">
    <!-- 搜索框 -->
    <div class="search">
      <myFrom v-bind="formConfig" v-model:formData="formData">
        <template #header>
          <Title>
            <template #title>搜索管理员</template>
          </Title>
        </template>
        <template #footer>
          <div class="footer">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </div>
        </template>
      </myFrom>
    </div>
    <!-- 表单 -->
    <div class="mytable">
      <myTable
        :tableData="tableData"
        v-bind="tableConfig"
        v-model:pageList="pageList"
      >
        <template #header>
          <Title>
            <template #title> 管理员列表 </template>
          </Title>
        </template>
        <template #time="scope">
          {{ formatDate(scope.row.time) }}
        </template>
        <template #avatar="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="baseURL + scope.row.avatar"
            :preview-src-list="[baseURL + scope.row.avatar]"
            fit="cover"
          />
        </template>
        <template #phone="scope">
          <span v-if="scope.row.phone">{{ scope.row.phone }}</span>
          <span v-else>暂无填写</span>
        </template>
        <template #jurisdiction="scope">
          <div>
            是否具有发布权限
            <el-switch
              v-model="scope.row.addpower"
              @click="powerChange(1, scope.row)"
            />
          </div>
          <div>
            是否具有修改权限
            <el-switch
              v-model="scope.row.updatepower"
              @click="powerChange(2, scope.row)"
            />
          </div>
          <div>
            是否具有删除权限
            <el-switch
              v-model="scope.row.deletepower"
              @click="powerChange(0, scope.row)"
            />
          </div>
        </template>
        <template #operation="scope">
          <el-button
            type="danger"
            :icon="Delete"
            circle
            @click="handleDelete(scope.row._id)"
        /></template>
      </myTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

import myFrom from '@/base-ui/form'
import myTable from '@/base-ui/table'
import { Title } from '@/components/admin/public'

import { formConfig, tableConfig } from '@/views/admin/config/adminMange.config'

import {
  getAdmintorPageList,
  getAdmintorList,
  searchAdmintorList,
  updateAdmintorAuthority,
  deleteAdmintor
} from '@/server/serve/api_admintor'
import type { RequsetAdmintorListDataTypes } from '@/server/serve/api_admintor'

import { baseURL } from '@/utils/axios'
import formatDate from '@/utils/dayjs'

import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'

// 分页数据
const pageList = ref({
  // 当前页数
  currentPage: 1,
  // 当前页显示数据条数
  pageSize: 10,
  // 总数
  total: 0,
  // 分页列表
  pageSizes: [5, 10, 15, 20]
})

// 表单数据
const newFromData: any = {}
for (const item of formConfig.formItems) {
  newFromData[`${item.field}`] = ''
}
const formData = ref<any>(newFromData)

// 表格数据
const tableData = ref<Array<RequsetAdmintorListDataTypes>>()

// 监听表格数据展示方式，是否为默认 搜索数据
const defaultDataShowType = ref<boolean>(true)

// 初始化数据
const dataInitialization = () => {
  // 默认数据
  if (defaultDataShowType.value) {
    // 获取数据
    getAdmintorPageList(
      pageList.value.pageSize,
      (pageList.value.currentPage - 1) * pageList.value.pageSize
    ).then(({ data }) => {
      tableData.value = data.data?.admintorList
    })
    // 获取管理员总数量
    getAdmintorList().then(({ data }) => {
      pageList.value.total = (data.data?.admintorList.length as number) - 1
    })
  }
  // 搜索表单数据
  else {
    searchAdmintorList(formData.value.name).then(({ data }) => {
      tableData.value = data.data
        ?.admintorList as Array<RequsetAdmintorListDataTypes>
      pageList.value.total = data.data?.allNums as number
    })
  }
}

// 监听分页改变
watch(
  pageList,
  () => {
    dataInitialization()
  },
  { immediate: true }
)

// 搜索
const handleSearch = () => {
  defaultDataShowType.value = false
  dataInitialization()
}

// 权限更改
/**
 *
 * @param type 更改类型 0 => 删除权限 1 => 发布权限 2 => 修改权限
 * @param userInfo 用户信息
 */
const powerChange = (type: number, userInfo: RequsetAdmintorListDataTypes) => {
  updateAdmintorAuthority(userInfo._id, type).then(({ data }) => {
    if (data.code)
      return ElMessage({
        type: 'warning',
        message: data.mes
      })
    ElMessage({
      type: 'success',
      message: data.mes
    })
  })
}

// 删除操作
/**
 *
 * @param userID 被删除的用户ID
 */
const handleDelete = (userID: string) => {
  ElMessageBox.confirm('确认要删除该管理员吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const { data } = await deleteAdmintor(userID)
      if (data.code)
        return ElMessage({
          type: 'warning',
          message: data.mes
        })
      ElMessage({
        type: 'success',
        message: data.mes
      })
      // 本地删除
      const findIndex = tableData.value!.findIndex(
        (item) => item._id === userID
      )
      tableData.value!.splice(findIndex, 1)
    })
    .catch(() => {
      console.log()
    })
}
</script>

<style scoped lang="less">
#manage {
  .search {
    padding: 0px 10px 20px;
    background-color: #fff;
    border-radius: 16px;
    .footer {
      display: flex;
      justify-content: flex-end;
    }
  }
  .mytable {
    padding: 20px 10px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 16px;
  }
}
</style>
